<template>
  <div class="app-container">
    <div class="flex-box">
      <div class="item">
        <el-input v-model="searchcontent" placeholder="请输入" class="input-with-select">
          <el-select class="left-s" v-model="searchtype" slot="prepend" placeholder="请选择">
            <el-option label="联系方式" value="contact"></el-option>
            <el-option label="邮箱" value="email"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </div>

      <div class="item">
        <el-select v-model="transtype" placeholder="请选择交易类型" @change="getList">
          <el-option
            :key="0"
            label="全部交易类型"
            :value="null"
          />
          <el-option
            v-for="item in transtypelist"
            :key="item.val"
            :label="item.lab"
            :value="item.val"
          />
        </el-select>
      </div>

      <div class="item">
        <el-select
          v-model="searchuid"
          filterable
          clearable
          remote
          reserve-keyword
          placeholder="请输入用户联系方式"
          :remote-method="remoteMethod"
          :loading="searchUloading">
          <el-option
            v-for="item in searchuserlist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" class="no-r-b"
      :header-cell-style="{background:'#FAFAFA',color:'#666666'}">
      <el-table-column align="center" label="交易ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="订单ID">
        <template slot-scope="scope">
          <span>{{ scope.row.orderid }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="交易单号">
        <template slot-scope="scope">
          <span>{{ scope.row.transno }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="交易类型">
        <template slot-scope="scope">
          <span>{{
            scope.row.transtype == 1 ? '预定订单订金付款' :
            scope.row.transtype == 2 ? '预定订单结账付款' :
            scope.row.transtype == 3 ? '商品订单付款' :
            scope.row.transtype == 9 ? '退款' : '未知类型'
           }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="支付方式">
        <template slot-scope="scope">
          <span>
            {{
              scope.row.paytype == 0 ? '无需支付':
              scope.row.paytype == 1 ? '钱包支付':
              scope.row.paytype == 2 ? '反馈钱包支付':
              scope.row.paytype == 3 ? '现金支付': '未知方式'
            }}
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="交易金额">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="交易名称">
        <template slot-scope="scope">
          <span>{{ scope.row.transname }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户名称">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户邮箱">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户电话">
        <template slot-scope="scope">
          <span>{{ scope.row.contact }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户累计消费">
        <template slot-scope="scope">
          <span>{{ scope.row.total/100 }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="交易状态">
        <template slot-scope="scope">
          <span>
          {{
            scope.row.status == 1 ? '待交易' :
            scope.row.status == 2 ? '成功' :
            scope.row.status == 3 ? '退款' :
            scope.row.status == 4 ? '取消' : '未支付'
          }}
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="交易单创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-if="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
  import { getCume } from "@/api/cume"
  import { getUserList } from "@/api/member"
  import Pagination from '@/components/Pagination'
  export default {
    name: 'CumeList',
    components: { Pagination },
    data() {
      return {
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20
        },
        searchcontent: '',
        searchtype: 'contact',
        transtype: null,
        transtypelist: [
          {val: 1,lab: '预定订单订金付款'},
          {val: 2,lab: '预定订单结账付款'},
          {val: 3,lab: '商品订单付款'},
          {val: 9,lab: '退款'}
        ],
        searchuid: null,
        searchuserlist: [],
        searchUloading: false
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        const search = { searchcontent: this.searchcontent, transtype: this.transtype, searchtype: this.searchtype, uid: this.searchuid }
        const postdata = { ...this.listQuery, ...search }
        getCume(postdata).then((response) => {
          const { data } = response
          console.log(response, 'getOrder')
          this.list = data.list
          this.total = data.total
          this.listLoading = false
        })
      },
      remoteMethod(val) {
        this.searchuserlist = [];
        if (val !== '') {
          this.loading = true;
          getUserList({limit: 99999, page: 1, searchcontent: val}).then(res=>{
            res.data.list.forEach(item=>{
              this.searchuserlist.push(
              {
                value: item.id,
                label: item.contact
              })
            })
          })
        } else {
          this.searchuserlist = [];
        }
      }
    }
  }
</script>

<style lang="scss">
  .app-container{
    .search{
      width: 400px;
      margin-bottom: 20px
    }
  }
  .left-s .el-input {
    width: 110px;
  }
  .input-with-select .el-input-group__prepend {
    // background-color: #fff;
  }
</style>
